<script setup lang="ts">
import { apiOrderBuyList, apiOrderSellList } from "@/apis/order";
import { router, shortenString } from "@/utils/tools";
import { onReachBottom } from "@dcloudio/uni-app";
import { onShow } from "@dcloudio/uni-app";
import { computed, ref } from "vue";

const props = defineProps(["lists", "scene"]);

// shortenString(item.describes)
const productDescribes = computed(() => (row: any) => {
  return shortenString(row.describes, 20);
});
const isImg = (url = "") => {
  if (
    url.indexOf(".png") > -1 ||
    url.indexOf(".jpg") > -1 ||
    url.indexOf(".jpeg") > -1 ||
    url.indexOf(".webp") > -1
  ) {
    return true;
  }
  return false;
};
const productImage = computed(() => (row: any) => {
  const str = row.images.split(",")[0];
  if (isImg(str)) {
    return str;
  }
  return str + "?x-oss-process=video/snapshot,t_0,f_jpg";
});

// 详情
const chooseDetail = (e: any) => {
  uni.navigateTo({ url: "/pagesOrder/order/detail?scene=buy" });
  // tabFlag.value = flag;
};
onReachBottom(() => {
});
</script>
<template>
  <view v-for="item in lists" :key="item.id">
    <view class="order-card">
      <view class="order-card-header flex flex-between">
        <view class="flex">
          <image class="" src="" />
          <view>{{ item.shopName }}</view>
        </view>
        <view class="flex order-card-header-tag">
          <!-- <uv-tags
            v-if="item.sendType == 0"
            text="待发货"
            plain
            plainFill
            size="mini"
            type="warning"
          ></uv-tags>
          <uv-tags v-else text="已发货" plain plainFill size="mini"></uv-tags> -->

          <uv-tags
            v-if="item.status == 1 && item.sendType == 0"
            text="待发货"
            plain
            plainFill
            size="mini"
            type="warning"
          ></uv-tags>
          <uv-tags
            v-if="item.status == 1 && item.sendType == 1"
            text="已发货"
            plain
            plainFill
            size="mini"
          ></uv-tags>
          <uv-tags
            v-if="item.status == 3"
            text="申请退款"
            plain
            plainFill
            size="mini"
          ></uv-tags>
          <uv-tags
            v-if="item.status == 4"
            text="商户退款"
            plain
            plainFill
            size="mini"
          ></uv-tags>
          <uv-tags
            v-if="item.status == 5"
            text="退款到账"
            plain
            plainFill
            size="mini"
          ></uv-tags>
        </view>
      </view>
      <uv-line></uv-line>

      <view class="order-card-content flex">
        <view class="flex flex-between">
          <image :src="productImage(item)" />
        </view>
        <view style="width: 100%">
          <view class="flex flex-column goods-details">
            <view class="content">
              {{ productDescribes(item) }}
            </view>
            <view class="flex goods-tag">
              <uv-tags
                v-if="item.authentication == 1"
                text="已认证"
                plain
                size="mini"
              ></uv-tags>
              <uv-tags v-else text="未认证" plain size="mini"></uv-tags>
            </view>
            <view class="flex flex-align-center flex-between price">
              <view class="flex flex-align-center">
                <view class="pay-price">￥{{ item.currentPrice }}</view>
              </view>
              <view
                class="detail"
                @click="
                  router(
                    `/pagesOrder/order/detail?id=${item.id}&scene=${scene}`
                  )
                "
                >查看详情></view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.order-card {
  margin-top: 20rpx;
  background: #ffffff;
  height: 300rpx;
  box-sizing: border-box;
  justify-content: space-between;

  .order-card-header {
    padding: 20rpx;

    image {
      width: 50rpx;
      height: 50rpx;
    }

    .order-card-header-tag {
      // width: 100%;
    }
  }

  .order-card-content {
    padding: 20rpx;
    font-size: 28rpx;
    width: 100%;

    .content {
      font-size: 28rpx;
      font-weight: bold;
    }

    image {
      width: 170rpx;
      height: 170rpx;
      border-radius: 10rpx;
    }

    .goods-details {
      padding: 0 20rpx;

      .content {
        margin-bottom: 5rpx;
      }

      .goods-tag {
        margin-bottom: 10rpx;
      }
    }

    .price {
      // padding: 10rpx;
      width: 100%;
    }

    .pay-price {
      font-size: 28rpx;
      color: #f3604e;
      font-size: 32rpx;
      font-weight: bold;
    }

    .line-price {
      color: #cecece;
      font-size: 24rpx;
      margin-left: 10rpx;
    }

    .detail {
      font-size: 24rpx;
      color: #328cfe;
    }
  }
}
</style>
